<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			// document.getElementById()//根据id返回对象引用
			// document.getElementsByClassName()//根据class返回对象引用
			// document.getElementsByName()//根据name
			// document.getElementsByTagName()//根据 "<" 后的标签类型 eg：<div></div>中就是div
			// document.querySelector()//单个，css语法，*div #div div
			// document.querySelectorAll()//集合 
			
			// window.onload和$函数的区别：
			// 1.window.onload是在所有元素(HTML页面和CSS)加载完毕后再加载，$是在HTML（DOM结构）加载完后加载
			// 2.window.onload不能同时编写多个，如果有多个window.onload方法只能执行一个（最后一次赋值会掩盖之前的赋值（只有最后一次赋值有效）；
			//   $(document).ready可以同时编写多个，并都能执行
			// window.onload=function(){
			// 	var div=document.querySelector("div")
			// 	//输出
			// 	console.log(div)
			// }
			// window.onload=function(){
			// 	console.log(0)
			// }
			
			// $(document).ready(function(){
			// 	console.log(0)
			// })
			// $().ready(function(){
			// 	console.log(1)
			// })
			// $(function(){
			// 	console.log(2)
			// })
			
			// // 将id为txtName的DOM对象引用并赋值给一个变量
			// var txtName=document.getElementById("txtName")
			// // 定义一个jQuery变量，并将DOM对象转换为JQuery对象
			// var $txtName=$(txtName)
			
			
			// jQuery3.3.1选择器
			
			// $(function(){
			// 	// :contains(text) 包含的文本内容
			// 	// li:contains(text) li标签包含的有文本的文本内容
			// 	$("li:contains('文本')").css("color","red")
			// 	// li:contains(text) li标签包含的文本内容有2的内容
			// 	$("li:contains('2')").css("color","yellow")
				
			// 	// :has（selector）子元素包含的文本内容
			// 	//li:has（span） li的子元素span（也可以是子元素的选择器）包含的文本内容
			// 	$("li:has(span)").css("color","blue")
				
			// 	//:empty选择空的
			// 	// 文本内容为空的li标签
			// 	$("li:empty").css("background","aqua")
				
			// 	// :parent有文本内容
			// 	// 有文本内容的li标签
			// 	$("li:parent").css("background","green")
			// })
			
			
			
			// jQuery属性
			
			$(function(){
				// 1.attr 
				// attr参数个数表示：1获取属性值，2是设置
				$(".div").attr("data-id","22")
				var ch1=$(".div").attr("data-id") 
				console.log(ch1)
				// 获取type属性为CheckBox索引为2（第三个）的标签，使用attr属性然后在控制台显示
				var ch2=$(":checkbox:eq(2)").attr("checked")
				console.log(ch2)
			
				
				
				// 2.prop(适用于按钮，单选框，多选框，下拉框等)
				// 获取type属性为CheckBox索引为2（第三个）的标签，使用prop属性然后在控制台显示包含属性为checked
				var ch3=$(":checkbox:eq(2)").prop("checked")
				console.log(ch3)
				// 选中为true，没选中为false
				if(ch3==true){
					
				}
				$(":checkbox:eq(2)").prop("checked",false)
				
				
				// 3.HTML 代码/文本/值
				// 参数个数代表的意义：0获取，1设置
				// html() html的代码
				// text() 文本内容
				// val() 交互控件的值
				console.log($(".div").html())
				console.log($(".div").text())
				console.log($(".div").val())
				console.log($(":checkbox:eq(0)").val())
				// 将type属性为CheckBox索引为0（第一个）的标签value值设为2
				$(":checkbox:eq(0)").val("2")
				// 在类名div的标签中嵌入<h2>h2</h2>（HTML代码）
				$(".div").html("<h2>h2</h2>")
				
				
				// 动画效果
				
				// 显示隐藏
				$(".show").click(function(){
					$(".div111").show()
				})
				$(".hide").click(function(){
					$(".div111").hide()
				})
				$(".toggle").click(function(){
					$(".div111").toggle()
				})
				
				// 滑动
				$(".slide").click(function(){
					$(".div111").slideDown()
				})
				$(".slide").click(function(){
					$(".div111").slideUp()
				})
				$(".slide").click(function(){
					$(".div111").slideToggle()
				})
				
				// 淡入淡出
				$(".fadein").click(function(){
					$(".div111").fadeIn(5000)
				})
				// $(".fadeout").click(function(){
				// 	$(".div111").fadeout(5000)
				// })
				// $(".fadeto").click(function(){
				// 	$(".div111").fadeto(0.5)
				// })
				// $(".fadetoggle").click(function(){
				// 	$(".div111").fadetoggle(5000)
				// })
				
			})
			
			
			// jQuery事件
			
			$(function(){
				
				// 光标获取和失去
				$(".fo").blur(function(){
					if($(".fo").val()===""){
						$(this).val("账号")
					}
				})
				$(".fo").focus(function(){
					if($(".fo").val()==="账号"){
						$(this).val("")
					}
				})
				
				// change()是当前对象与选择对象不一样再改变（更新值）
				$("#sel").change(function(){
					console.log($(val()))
				})
				
				// on在选择元素上绑定一个或多个事件的事件处理函数。（click单击 dblclick双击）
				$(".clc").on("click dblclick",function(){
					console.log(1)
				})
			})
		</script>
	</head>
	<body>
		<!-- <div id="div">这是div</div> -->
		<!-- <input type="text" value="文本" id="txtName"/> -->
		
		<!-- 动画效果 -->
		<!-- 改变的是display:none -->
		<button class="show">show</button>
		<button class="hide">hide</button>
		<button class="toggle">toggle</button>
		<br>
		<!-- 改变的是高度height的值 -->
		<button class="slideDown">slideDown</button>
		<button class="slideUp">slideUp</button>
		<button class="slideToggle">slideToggle</button>
		<br>
		<!-- 改变的是opacity的值 -->
		<button class="fadein">fadein</button>
		<button class="fadeout">fadeout</button>
		<button class="fadeto">fadeto</button>
		<button class="fadetoggle">fadetoggle</button>
		<br>
		<!-- 淡入淡出 -->
		<!-- display:none是实现淡入淡出的关键 -->
		<div class="div111" style="background-color:red;display: none; width:200px; height:200px;"></div>
		<!-- 选择器 -->
			<!-- <ul>
				<li>文本1</li>
				<li>文本2</li>
				<li>文本3</li>
				<li><span>文本4</span></li>
				<li>文本5</li>
				<li></li>
				<li>
					
				</li>
			</ul> -->
		<!-- 属性 -->
		<div class="div" data-id="111" vale="val222">这是一个<span>div</span></div>
		<input type="checkbox" checked value="第一个input标签的value值">
		<input type="checkbox" checked="">
		<input type="checkbox" checked="checked">
		<input type="checkbox" checked="323">
		<!-- 事件 -->
		<button type="button" class="clc">事件</button>
		<input type="text" value="" placeholder="提示信息">
		<input type="text" class="fo" value="">
		<select name="" id="sel">
			<option value ="">足球</option>
			<option value ="">篮球</option>
			<option value ="">羽毛球</option>
			<option value ="">乒乓球</option>
			<option value ="">台球</option>
		</select>
	</body>
</html>
